<!DOCTYPE html>
<html>

	<head>

		<!--适配 移动端-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<meta charset="utf-8" />

		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate,max-age=0">
		<meta http-equiv="Expires" content="0">

		<!--引入图标-->
		<link rel="icon" href="https://dabai-1259760387.cos.ap-beijing.myqcloud.com/801%E5%B7%A5%E5%85%B7%E7%AE%B1/icon/801_256.ico" type="image/x-icon" />

		<!--引入Bootstrap-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="js/bootstrap.js"></script>
		<script src="js/bootstrap.bundle.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<!--引入Bootstrap-->

		<link rel="stylesheet" type="text/css" href="css/main.css" />

		<meta charset="utf-8" />

		<title>VMix GT字幕下载站</title>
		<meta name="author" content="BAI,明灯花月夜">
		<meta name="Keywords" content="vmix,VMix GT字幕下载站,GT字幕,gt字幕">
		<meta name="description" content="VMix GT字幕下载站">

		<style type="text/css">
			.card_con {
				padding: 8px;
			}
			
			.card-text,
			.card-subtitle,
			.card-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		</style>

	</head>

	<body>

		<nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Eleventh navbar example">
			<div class="container-fluid">
				<a class="navbar-brand" href="index.html" id="ref_page">VMix GT字幕下载站</a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

				<div class="collapse navbar-collapse" id="navbarsExample09">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-lg-center">

						<li class="nav-item">
							<a class="nav-link" href="pages/introduce.html">简介</a>
						</li>

						<li class="nav-item">
							<a class="nav-link" href="pages/submit.html">投稿</a>
						</li>
						

						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="true">下载</a>
							<ul class="dropdown-menu">
								<li>
									<a class="dropdown-item" href="https://dabai2017.lanzouc.com/iwe7H164cicj">GT编辑器</a>
								</li>
								<li>
									<a class="dropdown-item" href="https://www.vmix.com/">VMix官网</a>
								</li>

							</ul>
						</li>

					</ul>

				</div>
			</div>
		</nav>

		<!--toast模板-->
		<div id="toast1" class="toast align-items-center" style="margin: 16px;" role="alert" aria-live="assertive" aria-atomic="true">
			<div class="d-flex">
				<div class="toast-body" id="toast1_content">
					Hello, world! This is a toast message.
				</div>
				<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
			</div>
		</div>

		<!--内容主题  gt列表在这写-->

		<div class="container-fluid">

			<div class="row" id="gt_content">

			</div>

		</div>

		<div class="modal fade" tabindex="-1" id="infoModal">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="mymodal-title">标题</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body" id="mymodal-content">
						<p>内容</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="mymodal-btn1">下载</button>
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		
		isPhone();

		setData();

		//列表绑定数据
		function setData() {

			var str = '';
			var cag_text = '集合包';

			$.getJSON('src/gt_list.json?timestamp='+new Date().getTime(), function(data) {

				for(var i = 0; i < data.length; i++) {

					if(data[i].cag == '1') {
						cag_text = '字幕文件';
					} else {
						cag_text = '集合包';
					}

					str += '<div class="card_con col-sm-6 col-md-4 col-xl-2">' +
						'<div class="card ripple" id="card' + i + '">' +
						'<img src="' + data[i].img_link + '" class="card-img-top" alt="图片加载失败">' +
						'<div class="card-body">' +
						'	<h5 class="card-title">' + data[i].title + '</h5>' +
						'	<h6 class="card-subtitle mb-2 text-muted">' + data[i].uploader + ' - ' + cag_text + '</h6>' +
						'	<p class="card-text">' + data[i].des + '</p>' +
						'</div>' +
						'</div>' +
						'</div>';

				}

				console.log(str);

				$("#gt_content").html(str);

				for(var o = 0; o < data.length; o++) {
					uu(data, o);
				}

			});

		}

		//详细信息弹窗 生成
		var myModal = new bootstrap.Modal('#infoModal', {
			keyboard: false
		});

		//设置 弹窗绑定事件
		function uu(res, man) {

			var cag_text = '集合包';

			$("#card" + man).click(function() {

				if(res[man].cag == '1') {
					cag_text = '字幕文件';
				} else {
					cag_text = '集合包';
				}

				$("#mymodal-title").text(res[man].title);
				$("#mymodal-content").html(
					'标题：' + res[man].title + '<br \>' +
					'投稿者：' + res[man].uploader + '<br \>' +
					'描述：' + res[man].des + '<br \>' +
					'分类：' + cag_text + '<br \>' +
					'下载链接：' + res[man].src_link + '<br \>'
				);

				myModal.show();

				$("#mymodal-btn1").unbind("click");

				$("#mymodal-btn1").click(function() {
					window.open(res[man].src_link);
					console.log(res[man].src_link);
					myModal.hide();
				});

			});
		}

		//检测是否是 手机访问网站
		function isPhone() {
			let userAgentInfo = navigator.userAgent;
			let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
			let isPC = true;
			for(let i = 0; i < Agents.length; i++) {
				if(userAgentInfo.indexOf(Agents[i]) > 0) {
					isPC = false;
					break;
				}
			}

			if(isPC) {

			} else {
				toast1('不推荐使用手机访问！');
			}

		}

		function toast1(text1) {
			//调用toast1
			$("#toast1_content").text(text1);
			new bootstrap.Toast($("#toast1")).show();
		}
		
		
		$('#ref_page').attr('href','index.html?timestamp='+new Date().getTime());
		
		
	</script>

</html>